<template>
  <div class="monitor-container">
    <el-card style="margin:10px;">
        <h3 style="text-align:left;">实时监控</h3>
        <hr>
    <el-container>
    <el-main class="demo-image">
  <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration"></span>
    
    <el-image
      style="width: 650px; height: 430px;float:left"
      :src="url"
      :fit="fit"></el-image></div>
    
  </el-main>
  <el-aside class="info" style="text-align:left;background-color:white">
    <br>
    <hr>
    <span>课程名称:       数据库  </span>
    <br>
    <span>任课老师:     番薯    </span>
    <br>
    <span>班级人数:       1  </span>
    <br>
    <br>
    <hr>
<el-row style="">
    <br>
  <br>
    
 
  <br>
  <br>
    <br>  
     <br>
  
  <br>
  <el-button style="color:#2d3a4b;background-color :#CCE2FF;">上传</el-button>
  
  <el-button style="color:white;background-color :#2d3a4b;">导出</el-button>
</el-row>
</el-aside>
</el-container>

</el-card>
</div>
  

</template>

<script>
import { mapGetters } from 'vuex'

export default {
    data() {
      return {
        fits: ['fill'],
        url: ''
      }
    },
  name: 'Monitor',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.monitor {
  &-container {
  background-color: white;
  color: #020944;
  text-align: center;


  }
  &-text {
    background-color: white;
    font-size: 20px;

  }
  
}
.submi{ 
  color: #2d3a4b;
}
</style>
